<script setup lang="ts">
import { useRouter } from 'vue-router'
import SelfProcess from '@/components/useRouteCom/SelfProcess.vue'
const router = useRouter()

const changeRouter = () => {
  // router.push('/useStore')
  //拼接url传参
  // router.push({path:'/usestore',query:{
  //   id:'xxxxxx'
  //   }})
  router.push({
    name: 'useStore',
    params: {
      id: 'xxxxxx',
    },
  })
}
window.addEventListener('hashchange', function () {
  console.log('hashchange')
})
window.addEventListener('popstate', function () {
  console.log('popstate')
})

const otxt = document.getElementById('oTxt') as HTMLInputElement
const oBtn = document.getElementById('oBtn') as HTMLButtonElement
let n: number | string = 0

oBtn.addEventListener(
  'click',
  function () {
    if (typeof n === 'number') {
      n++
    } else {
      n = Number(n) + 1
    }
    add()
  },
  false,
)
get()

function add() {
  if ('onhashchange' in window) {
    //如果浏览器的原生支持该事件
    window.location.hash = '#' + n
  }
}

function get() {
  if ('onhashchange' in window) {
    //如果浏览器的原生支持该事件
    window.addEventListener(
      'hashchange',
      function () {
        const hashVal = window.location.hash.substring(1)
        if (hashVal) {
          n = hashVal
          otxt.value = n
        }
      },
      false,
    )
  }
}
</script>

<template>
  <SelfProcess></SelfProcess>
  <el-button @click="changeRouter">点我跳转useRouter</el-button>
  <router-link to="/useRouter/childView" active-class="active">跳转子路由</router-link>
  <div class="chr">
    <router-view></router-view>
    <router-view name="aaa"></router-view>
    <router-view name="bbb"></router-view>
  </div>
</template>

<style scoped lang="scss">
a {
  text-decoration: none;
  color: #fff;
}
.chr {
  margin: 0 auto;
  width: 1000px;
  background: deeppink;
}
.active {
  color: dodgerblue;
  text-decoration: none;
}
</style>
